<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>雪花飘落</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            background-image: url(https://p1.ssl.qhmsg.com/t016c1df1ba2d527042.jpg);
            background-size: cover;
            background-color: black;
            height: 100vh;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <canvas></canvas>
    <script>
        let canvas = document.querySelector("canvas");
        let conttext = canvas.getContext('2d');
        let w = window.innerWidth;
        let h = window.innerHeight;
        canvas.width = w;
        canvas.height = h;

        let num = 200;
        let snows = [];
        for(let i = 0;i < num; i++){
            snows.push({
                x:Math.random()*w,
                y:Math.random()*h,
                r:Math.random()*10+1
            });
        }
        let move = () => {
            for(let i = 0; i < num; i++){
                let snow = snows[i];
                snow.x += Math.random()*2+1;
                snow.y += Math.random()*2+1;
                snow.x = snow.x > w ? 0 : snow.x;
                snow.y = snow.y > h ? 0 : snow.y;
            }
        }
        let draw = () => {
            conttext.clearRect(0,0,w,h);
            conttext.beginPath();
            conttext.fillStyle = 'rgb(255,255,255)';
            conttext.shadowColor = 'rgb(255,255,255)';
            conttext.shadowBlur = 10;

            for(let i = 0; i < num; i++){
                let snow = snows[i];
                conttext.moveTo(snow.x,snow.y);
                conttext.arc(snow.x,snow.y,snow.r,0,Math.PI*2);
            }
            conttext.fill();
            conttext.closePath();
            move();
        }
        draw();
        setInterval(draw,30);
    </script>
</body>
</html>